<template>
  <el-menu default-active="1-4-1" background-color='#545c64' text-color="#fff" active-text-color="#ffd04b" class="el-menu-vertical-demo"
   @open="handleOpen" @close="handleClose" 
   :collapse="isCollapse">
   <!-- isCollapse绑定是是个计算的方法 返回的是flase -->
   <h2>{{isCollapse ?'后台':'Maria商城后台管理系统'}}</h2>
    <!-- 没有子菜单的需要循环渲染出来 clickmenu(item)点击把name传过去给路由切换模块-->
    <el-menu-item @click='clickmenu(item)' v-for="item in nochiliden" :index="String(item.path)" :key="item.path" >
        <i :class="'el-icon-'+ item.icon"></i>
        <span slot="title">{{item.label}}</span>
    </el-menu-item>
    <!-- 有子菜单的标题循环渲染出来 haschildren是个方法返回的是数组-->
    <el-submenu  v-for='item in haschildren' :index="String(item.path)" :key='item.path' >
      <template slot="title">
        <i :class="'el-icon-' +item.icon"></i>
        <span slot="title">{{item.label}}</span>
      </template>
         <!-- 子菜单里面的数b组还要循环 -->
      <el-menu-item-group v-for="(subItem,subIndex) in item.children" :key='subItem.path' >
        <el-menu-item  @click='clickmenu(subItem)' :index='String(subIndex)'>{{subItem.label}}</el-menu-item>
      </el-menu-item-group>
    </el-submenu> 
</el-menu>
</template>

<script>
 export default {
   name:'CommonAside',
    data() {
      return {
        menu:[],
      };
    },
   
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      clickmenu(item){
        // item是路由的信息
         this.$router.push({
           name:item.name //  实现跳转 把item的名字传过去跳转匹配路由
         })
         this.$store.commit('selectMenu',item)//点击某个路由 把其路由的信息传到vuex里tab.js
      }
    },
     computed:{
      //  计算的方法一定要返回东西
    //  分开渲染有子菜单的数据和没有菜单的数据
    nochiliden(){
      return this.asyncMenu.filter(item=>{return !item.children})
      // 筛出没有子菜单的的数组
    },
    haschildren(){
       return this.asyncMenu.filter(item=>{return item.children})
    },
    isCollapse(){
      // 全局可以使用的在main.js定义的$store 
      // 使用tab的数据 ：false
        return this.$store.state.tab.isCollapse
    },
    asyncMenu() {//动态获取menu
      return this.$store.state.tab.menu
    }
    },
  }
  

</script>

<style lang='less' scoped>
 .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu{
    height: 100%;
    border:0;
    h2{
      color: #fff;
      text-align: center;
      line-height: 48px;
  font-weight: 400;
    }
  }
</style>